<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入公共样式(import)后.必须要进行引入！ -->
</head>

<body>
    <!-- head  ----start ---->
    <div class="head">
        <div class="country">
            <i>法国</i>
            <span class="iconfont icon-arrow_down
            "></span>
        </div>
        <div class="search">
            <label for="">
                <span><i class="iconfont  icon-search"><input type="text" placeholder="店铺/品类/商圈"></i></span>
        <!-- 搜索图标可以用button按钮 -->
            </label>
        </div>
    </div>


    <!-- banner and nav   -----S -->
    <div class="banner">
        <div class="ad">
            <img src="./images/banner.png" alt="">
        </div>

        <div class="nav">
            <div>
                <img src="./images/icon1.png" alt="">
                <p>美食外卖</p>
            </div>
            <div>
                <img src="./images/icon2.png" alt="">
                <p>美食外卖</p>
            </div>
            <div>
                <img src="./images/icon3.png" alt="">
                <p>美食外卖</p>
            </div>
            <div>
                <img src="./images/icon4.png" alt="">
                <p>美食外卖</p>
            </div>
            <div>
                <img src="./images/icon5.png" alt="">
                <p>美食外卖</p>
            </div>
            <div>
                <img src="./images/icon6.png" alt="">
                <p>美食外卖</p>
            </div>
            <div>
                <img src="./images/icon7.png" alt="">
                <p>美食外卖</p>
            </div>
            <div>
                <img src="./images/icon8.png" alt="">
                <p>美食外卖</p>
            </div>
        </div>
    </div>

      <!-- The goods --Start -->

     <div class="goods">
        <div class="hd">
            <h4> 新品推荐</h4>
            <span>更多&gt;</span>
           </div>

            <div class="bd">
                <div class="bd_item">
                    <div class="pic">
                        <img src="./images/product.png" alt="">
                    </div>
                    <div class="msg">
                     <span>新鲜澳洲进口牛扒豪华套餐</span>
                      <div class="msg_item">

                        <span><i class="iconfont  icon-huore
                            "></i><em class="red"> 236份</em></span>

                            <span><i class="iconfont  icon-huore
                                "></i><em class="red">好评100%</em>
                           </span>
                               <P class="iconfont icon-dianpu
                            ">澳洲牛扒（澳洲大酒店)</P>
                            <div class="num">
                             <span>￥<i>99</i></span>
                              <button>立即下单</button>
                            </div>
                        </div>    
                    </div>
                </div>
                <div class="bd_item2">
                    <div class="bd_item">
                        <div class="pic">
                            <img src="./images/product.png" alt="">
                        </div>
                        <div class="msg">
                         <span>新鲜澳洲进口牛扒豪华套餐</span>
                          <div class="msg_item">
    
                            <span><i class="iconfont  icon-huore
                                "></i><em class="red"> 236份</em></span>
    
                                <span><i class="iconfont  icon-huore
                                    "></i><em class="red">好评100%</em>
                               </span>
                                   <P class="iconfont icon-dianpu
                                ">澳洲牛扒（澳洲大酒店)</P>
                                <div class="num">
                                 <span>￥<i>99</i></span>
                                  <button>立即下单</button>
                                </div>
                            </div>    
                        </div>
                    </div>
                </div>

            </div>
        </div>
     </div>

     
     <!-- The banner_ad  start-->
       <div class="ad_item">
        <div class="pic">
            <img src="./images/ad.png" alt="">
        </div>
       </div>

       <!-- the goods_item  start-->
       
     <div class="goods">
        <div class="hd">
            <h4> 老店精选</h4>
            <span>更多&gt;</span>
           </div>

            <div class="bd">
                <div class="bd_item">
                    <div class="pic">
                        <img src="./images/product.png" alt="">
                    </div>
                    <div class="msg">
                     <span>新鲜澳洲进口牛扒豪华套餐</span>
                      <div class="msg_item">

                        <span><i class="iconfont  icon-huore
                            "></i><em class="red"> 236份</em></span>

                            <span><i class="iconfont  icon-huore
                                "></i><em class="red">好评100%</em>
                           </span>
                               <P class="iconfont icon-dianpu
                            ">澳洲牛扒（澳洲大酒店)</P>
                            <div class="num">
                             <span>￥<i>99</i></span>
                              <button>立即下单</button>
                            </div>
                        </div>    
                    </div>
                </div>
                <div class="bd_item2">
                    <div class="bd_item">
                        <div class="pic">
                            <img src="./images/product.png" alt="">
                        </div>
                        <div class="msg">
                         <span>新鲜澳洲进口牛扒豪华套餐</span>
                          <div class="msg_item">
    
                            <span><i class="iconfont  icon-huore
                                "></i><em class="red"> 236份</em></span>
    
                                <span><i class="iconfont  icon-huore
                                    "></i><em class="red">好评100%</em>
                               </span>
                                   <P class="iconfont icon-dianpu
                                ">澳洲牛扒（澳洲大酒店)</P>
                                <div class="num">
                                 <span>￥<i>99</i></span>
                                  <button>立即下单</button>
                                </div>
                            </div>    
                        </div>
                    </div>
                </div>

            </div>
        </div>
     </div>


    <!-- footer   ---start -->
    <div class="footer">
        <div class="red">
           <span class="iconfont icon-home"></span>
            <p >首页</p>
        </div>

        <div>
            <span class="iconfont icon-category
            "></span>
            <p>分类</p>
        </div>
      <div>
        <span class="iconfont  icon-orders
        "></span>
        <p>订单</p></div>
      <div>
          <span class="iconfont icon-my"></span>
          <p>我的</p>
      </div>
    </div>




</body>

</html>